<div class="row">
    <div class="col-sm-4">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>系统菜单</h5>
                <div class="ibox-tools">
                        <a href="javascript:" onclick="Page.RoleSet.menuTree.expandAll(true);">展开</a> /
                        <a href="javascript:" onclick="Page.RoleSet.menuTree.expandAll(false);">折叠</a>
                </div>
            </div>
            <div class="ibox-content">
                <div id="sys_menu_Tree" class="ztree" style="padding: 10px 20px;"></div>
            </div>
        </div>
    </div>
    <div class="col-sm-8">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>控制</h5>
                <div class="ibox-tools">
                    <a  href="#" onclick="Page.RoleSet.checkAll_OK()">
                        <i class="fa fa-check"></i> 全选
                    </a>
                    <a  href="#" onclick="Page.RoleSet.checkAll_Cancel()">
                        <i class="fa fa-close"></i> 反选
                    </a>
                </div>
            </div>

            <div class="ibox-content">
                <div style="min-height: 350px;">
                    <div style="padding: 2px;" id="button-control" >
                        <script type="text/html" id="buttons">
                            {{each buttons as value index}}
                            <div class="{{if value.related}}checkbuttonOk buttons_panelcheck{{else}} checkbuttonNo buttons_panelcheck{{/if}}">
                                <div id="{{value.id}}" class="checktext" >
                                    {{value.title}}
                                </div>
                                <div class="{{if value.related}}triangleOk{{else}}triangleNo{{/if}}"></div>
                            </div>
                            {{/each}}
                        </script>
                    </div>
                </div>
                <div class="pull-right">
                    <button type="submit" class="btn btn-warning" data-clipboard-text="testing" id="save_privileges_set">
                        保存设置
                    </button>
                    <button type="button" class="btn cancelBtn" data-toggle="close_modal"><i class="icon-undo"></i> 取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript">
    $.namespace('Page.RoleSet');

    Page.RoleSet = function () {
        var setting = {
            check: {enable: true, nocheckInherit: true, chkboxType: {"Y": "ps", "N": "ps"}},
            view: {selectedMulti: false, nameIsHTML: true},
            data: {simpleData: {enable: true}},
            callback: {
                beforeClick: function (treeId, treeNode, clickFlag) {
                    var tree = $.fn.zTree.getZTreeObj(treeId);
                    tree.checkNode(treeNode, true, true, true);
                    return false;
                },
                onCheck: function (event, treeId, treeNode) {
                    Page.RoleSet.loadButtons(roleId,treeNode['id'])
                    currentNode = treeNode;
                }
            }
        }, menuTree, roleId = '${RequestParameters["roleId"]}',currentNode;
        return {
            init: function () {
                Page.RoleSet.loadMenuTree();
                $('#save_privileges_set').click(function () {
                    Page.RoleSet.savePrivileges();
                })

            },
            savePrivileges: function () {
                var menuData = [], currentMenuId = currentNode == null?'':currentNode['id'],
                    cancelItems = [],treeNodes = Page.RoleSet.menuTree.getCheckedNodes(true);
                $(".checkbuttonNo").each(function () {
                    cancelItems.push($(this).find('.checktext').attr('id'));
                });
                for (var i = 0; i < treeNodes.length; i++) {
                    menuData.push(treeNodes[i].id);
                }
                Bolt.ajax('doajax', {
                    data: {roleId:roleId,'checkMenuIds':menuData.toString(),cancelItems:cancelItems.toString(),'currentMenuId':currentMenuId},
                    confirmMsg: "确定将所选角色权限重新分配吗？",
                    url: '${base}/admin/sys/role/privileges',
                    loadingmask: true
                })
            },
            loadMenuTree: function () {
                Bolt.ajax('doajax', {
                    url: '${base}/admin/sys/role/getMenuSimpleTree',
                    data:{id:'${RequestParameters.roleId}'},
                    loadingmask: true,
                    okCallback: function (datas) {
                        Page.RoleSet.menuTree = $.fn.zTree.init($("#sys_menu_Tree"), setting, datas);
                        var expendNodes = Page.RoleSet.menuTree.getNodesByParam("level", 0)
                        for (var i = 0; i < expendNodes.length; i++) {
                            Page.RoleSet.menuTree.expandNode(expendNodes[i], true, false, false);
                        }
                    }
                })
            },
            loadButtons:function (roleId,menuId) {
                Bolt.ajax('doajax', {
                    url: '${base}/admin/sys/role/selectButton',
                    data:{roleId:roleId,menuId:menuId},
                    loadingmask: true,
                    type:'GET',
                    okCallback: function (datas) {
                        var html = template('buttons', {buttons: datas});
                        $('#button-control').html(html);
                        Page.RoleSet.createAction();
                    }
                })
            },createAction:function(){
                $(".buttons_panelcheck").click(function(){
                    if(!$(this).hasClass('checkbuttonOk')){
                        $(this).attr('class','checkbuttonOk buttons_panelcheck');
                        $(this).find('.triangleNo').attr('class','triangleOk');
                    }else{
                        $(this).attr('class','checkbuttonNo buttons_panelcheck');
                        $(this).find('.triangleOk').attr('class','triangleNo');
                    }})
            },
            checkAll_OK:function(){
                $('.buttons_panelcheck').each(function () {
                    $(this).attr('class', 'checkbuttonOk buttons_panelcheck');
                    $(this).find('.triangleNo').attr('class', 'triangleOk');
                });
            },
            checkAll_Cancel: function(){
                $('.buttons_panelcheck').each(function () {
                    $(this).attr('class', 'checkbuttonNo buttons_panelcheck');
                    $(this).find('.triangleOk').attr('class', 'triangleNo');

                });
            }


        }
    }();

    $(document).ready(function () {
        Page.RoleSet.init();
    });
</script>